import styled, { css } from 'styled-components';
import { TStyledField } from './Field.types';

/**
 * Стилизованный элемент метки.
 * @param {TStyledField} props - Свойства компонента.
 * @param {CSSObject} props.labelStyle - Пользовательские стили для метки в виде объекта.
 * @returns {React.Element} - Элемент стилизованной метки.
 */
export const StyledField = styled.label<TStyledField>`

    margin: 0.1225rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.375rem;
    color: #343A40;
    font-family: 'Helvetica Neue';
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    ${({ displayInline }) => displayInline && css`
        display: inline;
    `};

    ${props => props.labelStyle && props.labelStyle};
    
`;